<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes flipOutY {
            0% {
                transform: perspective(400px) rotateY(0deg);
                opacity: 1
            }

            100% {
                transform: perspective(400px) rotateY(180deg);
                opacity: 1
            }
        }

        .flipOutY {
            backface-visibility: visible !important;
            animation-name: flipOutY;
            animation-duration: 3s;
            animation-fill-mode: forwards;
            animation-iteration-count: 1
        }
    </style>
</head>

<body>
    <img src="https://t9.baidu.com/it/u=86853839,3576305254&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1600928372&t=43b3bf2310673009bb2cd1bfbdbdd313" />
    <script>
        var ele = document.querySelector("img");
        ele.onclick=function(){
            ele.className="flipOutY";
        }
        ele.onanimationend=function(){
            ele.className="";
        }
    </script>
</body>

</html>